import React, { Component } from 'react'

export default class TodoList extends Component {
    state={
        list:[1,2,3]
    }
    
    addItem=(e)=>{
        if(e.keyCode==13){
            let val=e.target.value;

            this.setState({list:[val,...this.state.list]});

            // 不建议对原状态进行更改
            // this.state.list.unshift(val);
            // this.setState({list:this.state.list});

            //  wrong: push返回的新数组的长度，这里是把新数组的长度4返回给了list 
            //  this.setState({list:this.state.list.push(val)})
        }
    }

    render() {
        const {list}=this.state;
        return (
            <div>
                <input 
                    onKeyUp={this.addItem}
                />
                <h2>正在进行的条数：{list.length}</h2>
                <ul>
                    {
                        list.map(item=><li>{item}</li>)
                    }
                </ul>
            </div>
        )
    }
}
